<%- include('head') -%>

  <body>
    <!-- 表单上传文件，必须设置enctype为multipart/form-data -->
    <form action="/upload" method="POST" enctype="multipart/form-data">
      <input type="file" name="file" class="file">
      <button class="upload">上传</button>
      <br>
      <img src="" width="200" alt="" class="img">
    </form>
    <script>
      const file = document.querySelector('.file');
      const btn = document.querySelector('.upload');
      var img = document.querySelector(".img");
      file.onchange = function () {
        // file.files 可以获取表单控件选择的文件
        console.log(this.file);
        // 创建一个 fileReader实例
        var fd = new FileReader();
        // 读取成base64格式
        fd.readAsDataURL(this.files[0]);
        // 事件
        fd.onload = function () {
          // 监听 fd 读取过程 完毕后触发 结果 在 fd.result属性上
          img.src = this.result;
        }
      }
    </script>
  </body>

  </html>